
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { 
  Zap, 
  MapPin, 
  Calendar, 
  User, 
  Building, 
  Edit, 
  Eye,
  MoreHorizontal,
  Trash2
} from "lucide-react";
import { format } from "date-fns";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";

export default function ProjectCard({ project, onEdit, onDelete, isSelected, onSelect }) {
  const getStatusBadge = (projectStatus) => {
    const statusConfig = {
      planning: { color: "bg-gray-100 text-gray-700 border-gray-200", label: "规划中" },
      approved: { color: "bg-blue-100 text-blue-700 border-blue-200", label: "已批准" },
      construction: { color: "bg-green-100 text-green-700 border-green-200", label: "施工中" },
      completed: { color: "bg-purple-100 text-purple-700 border-purple-200", label: "已完成" },
      suspended: { color: "bg-red-100 text-red-700 border-red-200", label: "暂停" }
    };
    
    const config = statusConfig[projectStatus] || statusConfig.planning;
    return (
      <Badge variant="outline" className={`${config.color} border font-medium`}>
        {config.label}
      </Badge>
    );
  };

  const getVoltageColor = (voltage) => {
    const colors = {
      "110kV": "text-blue-600 bg-blue-50",
      "220kV": "text-green-600 bg-green-50", 
      "330kV": "text-orange-600 bg-orange-50",
      "500kV": "text-red-600 bg-red-50",
      "750kV": "text-purple-600 bg-purple-50",
      "1000kV": "text-pink-600 bg-pink-50"
    };
    return colors[voltage] || "text-gray-600 bg-gray-50";
  };

  return (
    <Card className={`group hover:shadow-xl transition-all duration-300 border-2 shadow-lg bg-white ${isSelected ? 'border-blue-500' : 'border-transparent'}`}>
      <CardHeader className="pb-4">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${getVoltageColor(project.voltageLevel).split(' ')[1]}`}>
              <Zap className={`w-6 h-6 ${getVoltageColor(project.voltageLevel).split(' ')[0]}`} />
            </div>
            <div>
              <Link to={createPageUrl(`ProjectDetail?id=${project.id}`)}>
                <CardTitle className="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
                  {project.projectName}
                </CardTitle>
              </Link>
            </div>
          </div>
          
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity">
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onSelect(project.id)}>
                <Checkbox checked={isSelected} className="mr-2" />
                {isSelected ? "取消选择" : "选择此项目"}
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => onEdit(project)}>
                <Edit className="w-4 h-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to={createPageUrl(`ProjectDetail?id=${project.id}`)}>
                  <Eye className="w-4 h-4 mr-2" />
                  查看详情
                </Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => onDelete(project.id)} className="text-red-600">
                <Trash2 className="w-4 h-4 mr-2" />
                删除项目及关联数据
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      
      <CardContent className="space-y-4">
        {/* Voltage Level and Status */}
        <div className="flex items-center justify-between">
          <Badge variant="outline" className={`${getVoltageColor(project.voltageLevel)} border font-semibold`}>
            <Zap className="w-3 h-3 mr-1" />
            {project.voltageLevel}
          </Badge>
          {getStatusBadge(project.projectStatus)}
        </div>

        {/* Location Info */}
        {(project.startLocation || project.endLocation) && (
          <div className="space-y-2">
            {project.startLocation && (
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <MapPin className="w-4 h-4 text-green-500" />
                <span>起点: {project.startLocation}</span>
              </div>
            )}
            {project.endLocation && (
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <MapPin className="w-4 h-4 text-red-500" />
                <span>终点: {project.endLocation}</span>
              </div>
            )}
          </div>
        )}

        {/* Length */}
        {project.totalLengthKm && (
          <div className="flex items-center gap-2 text-sm text-gray-600">
            <span className="font-medium">线路长度:</span>
            <span className="text-blue-600 font-semibold">{project.totalLengthKm} km</span>
          </div>
        )}

        {/* Personnel */}
        <div className="space-y-2">
          {project.projectManager && (
            <div className="flex items-center gap-2 text-sm text-gray-600">
              <User className="w-4 h-4 text-blue-500" />
              <span>项目经理: {project.projectManager}</span>
            </div>
          )}
          {project.constructionUnit && (
            <div className="flex items-center gap-2 text-sm text-gray-600">
              <Building className="w-4 h-4 text-gray-500" />
              <span>施工单位: {project.constructionUnit}</span>
            </div>
          )}
        </div>

        {/* Schedule */}
        {(project.plannedStartDate || project.plannedEndDate) && (
          <div className="pt-3 border-t border-gray-100">
            <div className="grid grid-cols-2 gap-2 text-xs">
              {project.plannedStartDate && (
                <div>
                  <span className="text-gray-500">开工日期</span>
                  <div className="flex items-center gap-1 text-gray-700 mt-1">
                    <Calendar className="w-3 h-3" />
                    <span>{format(new Date(project.plannedStartDate), "yyyy-MM-dd")}</span>
                  </div>
                </div>
              )}
              {project.plannedEndDate && (
                <div>
                  <span className="text-gray-500">完工日期</span>
                  <div className="flex items-center gap-1 text-gray-700 mt-1">
                    <Calendar className="w-3 h-3" />
                    <span>{format(new Date(project.plannedEndDate), "yyyy-MM-dd")}</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
